﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>数据管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
    <meta content="MyraStudio" name="author" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!-- App favicon -->
    <link rel="shortcut icon" href="assets/images/favicon.ico">

    <!-- App css -->
    <link href="/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="/assets/css/icons.min.css" rel="stylesheet" type="text/css" />
    <link href="/assets/css/theme.min.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <!-- Begin page -->
    <div id="layout-wrapper">
                <div class="container-fluid" style="margin-top: 10px;">

                    <!-- start page title -->

                    <div class="row">

                        <div class="col-md-6 col-xl-2">
                            <div class="card bg-success border-success">
                                <div class="card-body">
                                    <div class="mb-4">
                                        
                                        <h5 class="card-title mb-0 text-white">运行状态</h5>
                                    </div>
                                    <div class="row d-flex align-items-center mb-4">
                                        <div class="col-12">
                                            <h2 class="d-flex align-items-center mb-0 text-white">
                                                运行中
                                            </h2>
                                        </div>
                                        
                                    </div>

                                    
                                </div>
                            </div>
                        </div> <!-- end col-->

                        <div class="col-md-6 col-xl-4">
                            <div class="card bg-info border-info">
                                <div class="card-body">
                                    <div class="mb-4">
                                       
                                        <h5 class="card-title mb-0 text-white">运行时间</h5>
                                    </div>
                                    <div class="row d-flex align-items-center mb-4">
                                        <div class="col-12">
                                            <h2 class="d-flex align-items-center mb-0 text-white">
                                                7天5小时49分钟58秒
                                            </h2>
                                        </div>
                                    </div>

                                    
                                </div>
                            </div>
                        </div> <!-- end col-->

                        <div class="col-md-6 col-xl-3">
                            <div class="card bg-warning border-warning">
                                <div class="card-body">
                                    <div class="mb-4">
                                        
                                        <h5 class="card-title mb-0 text-white">Host Name</h5>
                                    </div>
                                    <div class="row d-flex align-items-center mb-4">
                                        <div class="col-12">
                                            <h2 class="d-flex align-items-center mb-0 text-white">
                                                admin
                                            </h2>
                                        </div>
                                        
                                    </div>

                                    
                                </div>
                            </div>
                        </div> <!-- end col-->

                        <div class="col-md-6 col-xl-3">
                            <div class="card bg-primary border-primary">
                                <div class="card-body">
                                    <div class="mb-4">
                                        
                                        <h5 class="card-title mb-0 text-white">数据库占用空间</h5>
                                    </div>
                                    <div class="row d-flex align-items-center mb-4">
                                        <div class="col-12">
                                            <h2 class="d-flex align-items-center mb-0 text-white">
                                                56.8GB
                                            </h2>
                                        </div>
                                        
                                    </div>

                                    <div class="progress badge-soft-light shadow-sm" style="height: 5px;">
                                        <div class="progress-bar bg-light" role="progressbar"  style="width: 38%;"></div>
                                        
                                    </div>
                                </div>
                            </div>
                        </div> <!-- end col-->

                       
                     </div>


                    <div class="row">
                        <div class="col-sm-6">
                            <div class="card">
                                <div class="card-body">
                                    
                                    <h4 class="card-title d-inline-block">CPU占用率</h4>

                                    <div id="morris-area-example" class="morris-chart" style="height: 180px;"></div>
                                    
                                    <div class="row text-center mt-4">
                                       
                                    </div>
                                </div>
                            </div>
                        </div> <!-- end col -->

                        <div class="col-sm-6">
                            <div class="card">
                                <div class="card-body">
                                    
                                    <h4 class="card-title d-inline-block">连接数</h4>

                                    <div id="morris-line-example" class="morris-chart" style="height: 180px;"></div>

                                    <div class="row text-center mt-4">
                                       
                                    </div>
                                </div>
                            </div>
                        </div> <!-- end col -->

                    </div>
                    <!-- end row-->

                    <div class="row">
                        <div class="col-sm-6">
                            <div class="card">
                                <div class="card-body">
                                    
                                    <h4 class="card-title d-inline-block">输入流量</h4>

                                    <div id="morris-line-example" class="morris-chart" style="height: 180px;"></div>

                                    <div class="row text-center mt-4">
                                       
                                    </div>
                                </div>
                            </div>
                        </div> <!-- end col -->

                        <div class="col-sm-6">
                            <div class="card">
                                <div class="card-body">
                                    
                                    <h4 class="card-title d-inline-block">输出流量</h4>

                                    <div id="morris-line-example" class="morris-chart" style="height: 180px;"></div>

                                    <div class="row text-center mt-4">
                                       
                                    </div>
                                </div>
                            </div>
                        </div> <!-- end col -->

                    </div>
                    <!-- end row-->


                </div> <!-- container-fluid -->

    </div>
    <!-- END layout-wrapper -->

    <!-- Overlay-->
    <div class="menu-overlay"></div>

	<script>
		var ipm = '[[${manageIp}]]';
	</script>
    <!-- jQuery  -->
    <script src="/assets/js/jquery.min.js"></script>
    <script src="/assets/js/bootstrap.bundle.min.js"></script>
    <script src="/assets/js/metismenu.min.js"></script>
    <script src="/assets/js/waves.js"></script>
    <script src="/assets/js/simplebar.min.js"></script>

    <!-- Morris Js-->
    <script src="/assets/plugins/morris-js/morris.min.js"></script>
    <!-- Raphael Js-->
    <script src="/assets/plugins/raphael/raphael.min.js"></script>

     <!-- Chart Js-->
   <script src="/assets/plugins/jquery-knob/jquery.knob.min.js"></script>

    <!-- Morris Custom Js-->
    <script src="/assets/pages/database-information-statistics-demo.js"></script>

    <!-- App js -->
    <script src="/assets/js/theme.js"></script>

</body>

</html>